<template>
  <div class="app-container">
    <el-form :model="formData" ref="form" size="small" label-position="top" :rules="rules"
      label-width="68px">
      <el-form-item label="引用流程" prop="processDefinitionId">
        <el-cascader v-model="formData.processDefinitionId" :options="flowData" clearable filterable
          :show-all-levels="false" style="width:40%;"
          :props="{ expandTrigger: 'click', multiple: false, checkStrictly: false, value: 'id', label: 'name' }"
          @change="onFlowChange">
        </el-cascader>
        <el-descriptions>
          <el-descriptions-item label="表单信息">{{ currFlow.description }}</el-descriptions-item>
          <el-descriptions-item label="流程版本">{{ currFlow.version }}</el-descriptions-item>
          <el-descriptions-item label="部署时间">{{ currFlow.publishTime }}</el-descriptions-item>
        </el-descriptions>
      </el-form-item>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="事项主题" prop="title">
            <el-input v-model="formData.title" placeholder="请输入事项主题" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>

        </el-col>
        <el-col :span="12" :offset="0">
          <el-form-item label="截至日期" prop="endTime">
            <el-date-picker v-model="formData.endTime" style="width: 240px"
              value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="请选择结束日期" />
          </el-form-item>

        </el-col>
      </el-row>

      <el-form-item label="事项内容" prop="content">
        <editor v-model="formData.content" :min-height="200" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="save">保存</el-button>
        <el-button @click="reset">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Editor from '@/components/Editor';
import { createEnterpriseInfo, updateEnterpriseInfo } from '@/api/enterprise/info';
import { getProcessDefinitionList } from "@/api/bpm/definition";
import { getSimpleForms } from '@/api/bpm/form.js';

export default {
  components: { Editor },
  data() {
    const { id } = this.$route.query;
    return {
      formData: {
        id: id || undefined,
        processDefinitionId: [],
        title: '',
        endTime: '',
        content: '',
        status: '1',
      },
      // 事项状态选项
      rules: {
        processDefinitionId: [
          { required: true, message: "引用流程不能为空", trigger: "blur", type: 'array' }
        ],
        title: [
          { required: true, message: "事项主题不能为空", trigger: "blur" }
        ],
        endTime: [
          { required: true, message: "截止日期不能为空", trigger: "blur" }
        ],
        content: [
          { required: true, message: "事项内容不能为空", trigger: "blur" }
        ],
      },
      flowData: [],
      currFlow: {
        description: '',
        version: '',
        publishTime: ''
      },
    };
  },
  created() {
    this.getFlowList();
  },
  methods: {

    /** 查询流程定义列表 */
    getFlowList() {
      getProcessDefinitionList({
        suspensionState: 1
      }).then(res => {
        this.flowData = res?.data || [];
      });
    },
    onFlowChange([val]) {
      this.currFlow = this.flowData.filter(({ id }) => id === val)[0];
    },
    save() {
      const { processDefinitionId, ...rest } = this.formData;
      const params = {
        ...rest,
        processDefinitionId: processDefinitionId[0] || ''
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.formData.id) {
            updateEnterpriseInfo(params).then(res => {
              this.$modal.msgSuccess("修改成功");
              this.gotoList();
            });
          } else {
            createEnterpriseInfo(params).then(res => {
              this.$modal.msgSuccess("新增成功");
              this.gotoList();
            });
          }
        }
      });
    },
    reset() {
      this.resetForm("form");
    },
    gotoList() {
      this.$router.replace('/corporate/items')
    }
  },
}
</script>

<style>

</style>
